<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <script>
        window.onload = function() {
            //点击超链接以后，删除一个员工信息
            //获取所有a标签
            var allA = document.getElementsByTagName("a");

            //为每一个超链接都绑定一个响应函数
            for (var i = 0; i < allA.length; i++) {
                allA[i].onclick = function() {
                    // 点击超链接后需要删除超链接那一行
                    //这里我们点击那个超链接this就是谁
                    // 获取当前的tr
                    var tr = this.parentNode.parentNode;
                    // 获取员工的名字
                    // var name = tr.getElementsByTagName("td")[0].innerHTML;
                    var name = tr.children[0].innerHTML;
                    // 删除之前弹出框是否确认删除   confirm弹出一个带有确认和取消按钮的提示框
                    //    如果用户点击确认则会返回true   取消则会返回false
                    var flag = confirm("是否删除" + name);

                    if (flag) {
                        // 删除tr
                        tr.parentNode.removeChild(tr);
                    }





                    // 点击超链接后，默认行为是跳转
                    // 但是我们此时并不下想出现默认行为，可以通过响应函数的最后return false 来取消默认行为
                    return false;
                }


            };


            // 添加员工信息功能
            // 点击按钮以后，将员工的信息添加到表格中
            var btn = document.getElementById("addEmpButton");
            btn.onclick = function() {
                //获取用户填写的信息
                // 获取名字
                var name = document.getElementById("empName").value;
                //    获取员工的email和salary
                var email = document.getElementById("email").value;
                var salary = document.getElementById("salary").value;



                // <tr>
                //     <td>Tom</td>
                //     <th>tom@tom.com</th>
                //     <td>5000</td>
                //     <td><a href="javascript:;">Delete</a></td>
                // </tr>

                // 需要将获取的信息保存到tr中

                // 创建一个tr
                var tr = document.createElement("tr");
                // 创建4个td

                var nameTd = document.createElement("td");
                var emailTd = document.createElement("td");
                var salaryTd = document.createElement("td");
                var aTd = document.createElement("td");

                // 创建一个a元素
                var a = document.createElement("a");


                // 创建文本节点
                var nameText = document.createTextNode(name);
                var emailText = document.createTextNode(email);
                var salaryText = document.createTextNode(salary);
                var delText = document.createTextNode("Delete");

                // 将文本添加到td中
                nameTd.appendChild(nameText);
                emailTd.appendChild(emailText);
                salaryTd.appendChild(salaryText);
                // 向a中添加文本
                a.appendChild(delText);


                // 向atd添加文本Delete
                aTd.appendChild(delText);




                // 将td添加到tr中
                tr.appendChild(nameTd);
                tr.appendChild(emailTd);
                tr.appendChild(salaryTd);
                tr.appendChild(aTd);
                // 向a中添加href属性
                a.href = "javascript:;";
                    

                // 获取table
                var employeeTable = document.getElementById("employeeTable");
                // 获取employeeTable中的tbody
                var tbody = employeeTable.getElementsByTagName("tbody")[0];

                //将tr添加到tbody中
                tbody.appendChild(tr);

                // 表单需要关闭默认
                return false;
            };



        }
    </script>


    <table id="employeeTable">
        <tr>
            <th>Name</th>
            <th>Email</th>
            <th>Salary</th>
            <th> &nbsp;</th>
        </tr>

        <tr>
            <td>Tom</td>
            <th>tom@tom.com</th>
            <td>5000</td>
            <td><a href="javascript:;">Delete</a></td>
        </tr>
        <tr>
            <td>erry</td>
            <td>jerry@sohu.com</td>
            <td>8000</td>
            <td>
                <a href="deleteEmp?id=002">Delete</a>
            </td>
        </tr>
        <tr>
            <td>bob</td>
            <td>bob@sohu.com</td>
            <td>10000</td>
            <td>
                <a href="deleteEmp?id=003">Delete</a>
            </td>
        </tr>
    </table>



    <h4>添加新员工</h4>
    <table>

        <tr>
            <td class="word">name:</td>
            <td class="inp">
                <input type="text" name="empName" id="empName">
            </td>
        </tr>

        <tr>
            <td class="word"> Email</td>
            <td class="inp">
                <input type="text" name="email" id="email">
            </td>
        </tr>

        <tr>
            <td class="word">Salary:</td>
            <td class="inp">
                <input type="text" name="salary" id="salary">
            </td>
        </tr>

        <tr>
            <td colspan="2" align="center">
                <button id="addEmpButton">
                    submit
                </button>
            </td>
        </tr>


    </table>

</body>

</html>